<template>
	<view class="study">
    <statusBar></statusBar>
		<logo></logo>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="choice" @click="choiceSub">
    	选择科目章节
      <image src="../../../static/img/study/down.png"></image>
    </view>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="mululist" v-if="mululist">
    	<view class="kemulist">
    		<view class="kemulist-title" @click="confirmKemu(index, item.SubId)" :class="{'active':kemuActiveIndex == index}" v-for="(item,index) in subList" :key="index">{{item.SubName}}</view>
    	</view>
      <view class="zhangjielist">
        <view class="zhangjielist-title" @click="confirmAll">全部</view>
      	<view class="zhangjielist-title" v-for="(item,index) in zhangjieList" @click="confirmMou(item.ChapterId)" :key="index">{{item.ChapterName}}</view>
      </view>
    </view>
    
    <view class="studylist" v-for="(item,index) in videoList" :key="index" @click="goStudyVideo(item.ResourceId)">
    	<view class="studylist-img">
    		<image :src="item.Thumbnail"></image>
    	</view>
      <view class="studylist-info">
      	<text class="studylist-info-title">{{item.SubName}}</text>
        <text class="studylist-info-ds">{{item.ResourceName}}</text>
        <text class="studylist-info-num">{{item.StudyCount}}人</text>
      </view>
    </view>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
	</view>
</template>

<script>
  import statusBar from "@/components/status-bar.vue"
  import logo from "../../../components/logo.vue"
	export default {
    components:{
    	logo,
      statusBar,
    },
		data() {
			return {
        mululist: false,
        kemuActiveIndex: 0,
        subList: [],
        zhangjieList: [],
        videoList: [],
        subId: '',
        type: '',
			};
		},
    created() {
      uni.request({
        url: this.apiUrl + 'api/Student/Study/GetAllSubList', 
        data: {},
        success: res => {
          if(res.statusCode == 200){
            this.subList = res.data.data;
            uni.request({
              url: this.apiUrl + 'api/Student/Study/GetVideoList', 
              data: {
                limit: 10000,
                page: 1,
                subId: this.subList[0].SubId,
                chapterId: '',
                type: 0,
              },
              success: res => {
                //console.log(res);
                if(res.statusCode == 200){
                  this.videoList = res.data.data.videoList;
                  for(var i = 0; i < this.videoList.length; i++){
                    this.videoList[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.videoList[i].Thumbnail;
                  }
                }else{
                  this.msg = '未知错误';
                  this.togglePopup('middle');
                }
              }
            });
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    methods:{
      //选择科目章节列表
      choiceSub: function(){
        this.mululist = !this.mululist;
        if(this.mululist){
          uni.request({
            url: this.apiUrl + 'api/Student/Study/GetAllSubList',
            data: {},
            success: res => {
              //console.log(res);
              if(res.statusCode == 200){
                this.subList = res.data.data;
                uni.request({
                  url: this.apiUrl + 'api/Student/Study/GetChapterBySub', 
                  data: {
                    subId: this.subList[0].SubId
                  },
                  success: ress => {
                    if(ress.statusCode == 200){
                      this.zhangjieList = ress.data.data;
                      this.subId = this.subList[0].SubId;
                    }else{
                      this.msg = '未知错误';
                      this.togglePopup('middle');
                    }
                  }
                });
              }else{
                this.msg = '未知错误';
                this.togglePopup('middle');
              }
            }
          });
        }
      },
      //选择科目
      confirmKemu: function(index, id){
        this.kemuActiveIndex = index;
        uni.request({
          url: this.apiUrl + 'api/Student/Study/GetChapterBySub', 
          data: {
            subId: id
          },
          success: res => {
            if(res.statusCode == 200){
              this.zhangjieList = res.data.data;
              this.subId = id;
            }else{
              this.msg = '未知错误';
              this.togglePopup('middle');
            }
          }
        });
      },
      //选择全部章节
      confirmAll: function(){
        uni.request({
          url: this.apiUrl + 'api/Student/Study/GetVideoList', 
          data: {
            limit: 10000,
            page: 1,
            subId: this.subId,
            chapterId: '',
            type: 0,
          },
          success: res => {
            if(res.statusCode == 200){
              this.videoList = res.data.data.videoList;
              console.log(this.videoList);
              for(var i = 0; i < this.videoList.length; i++){
                this.videoList[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.videoList[i].Thumbnail;
              }
              this.mululist = !this.mululist;
            }else{
              this.msg = '未知错误';
              this.togglePopup('middle');
            }
          }
        });
      },
      //选择某一章节
      confirmMou: function(id){
        uni.request({
          url: this.apiUrl + 'api/Student/Study/GetVideoList', 
          data: {
            limit: 10000,
            page: 1,
            subId: this.subId,
            chapterId: id,
            type: 0,
          },
          success: res => {
            if(res.statusCode == 200){
              this.videoList = res.data.data.videoList;
              for(var i = 0; i < this.videoList.length; i++){
                this.videoList[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.videoList[i].Thumbnail;
              }
              this.mululist = !this.mululist;
            }else{
              this.msg = '未知错误';
              this.togglePopup('middle');
            }
          }
        });
      },
      //去看视频
      goStudyVideo: function(id,path){
        uni.navigateTo({
            url: 'video/video?id='+ id +''
        });
      }
    }
	}
</script>

<style scoped>
  .line{
    height: 15upx;
    background-color: #F2F2F2;
  }
  .choice{
    text-align: center;
    height: 70upx;
    line-height: 70upx;
    font-size: 32upx;
    background-color: #ffffff;
  }
  .choice image{
    width: 18upx;
    height: 10upx;
  }
  .mululist{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: #ffffff;
    padding-bottom: 100upx;
    position: absolute;
    z-index: 999;
  }
  .mululist .kemulist{
    width: 40%;
    background-color: #F2F2F2;
  }
  .mululist .zhangjielist{
    width: 60%;
    background-color: #ffffff;
  }
  .kemulist-title{
    height: 65upx;
    line-height: 65upx;
    font-size: 24upx;
    text-indent: 15upx;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kemulist-title.active{
    background-color: #FFFFFF;
  }
  .zhangjielist-title{
    height: 65upx;
    line-height: 65upx;
    font-size: 24upx;
    text-indent: 15upx;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .studylist{
    height: 220upx;
    padding: 10px;
    background-color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .studylist .studylist-img{
    width: 50%;
  }
  .studylist .studylist-img image{
    width: 100%;
    height: 100%;
  }
  .studylist .studylist-info{
    width: 50%;
    position: relative;
  }
  .studylist-info-title{
    display: block;
    padding-top: 5upx;
    font-size: 30upx;
    line-height: 30upx;
    color: #333333;
    padding-left: 20upx;
  }
  .studylist-info-ds{
    display: block;
    padding-top: 15upx;
    font-size: 24upx;
    line-height: 34upx;
    color: #666666;
    padding-left: 20upx;
  }
  .studylist-info-num{
    position: absolute;
    bottom: 0upx;
    left: 20upx;
    font-size: 24upx;
    color: #888888;
  }
</style>
